<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/14
  Time: 16:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<style>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
</style>

<head>
    <title>个人中心</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
    <script src="${path}/resources/dist/js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
    <script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
    <link rel="stylesheet" href="${path}/resources/dist/css/main.css">
</head>
<body>
<div id="app">
    <template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>个人信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="editGame()">修改</el-button>
        </div>
        <div style="margin:10px 0">
            编号: {{update.adminid}}
        </div>
        <div style="margin:10px 0">
            姓名: {{update.username}}
        </div>
        <div style="margin:10px 0">
            角色姓名: {{update.rolename}}
        </div>
        <div style="margin:10px 0">
            创建时间: {{update.creationtime}}
        </div>
        <div style="margin:10px 0">
            最后登录时间: {{update.lastlogintime}}
        </div>
        <div style="margin:10px 0">
            角色状态: {{update.state==1?"可用":"不可用"}}
        </div>
    </el-card>

    <%--修改游戏--%>
    <el-dialog title="修改个人信息" :visible.sync="updateFlag" :before-close="handleClose">
        <el-form label-width="80px" :model="editUser">

            <el-row>
                <el-col :span="10" :offset="3">
                    <el-form-item label="修改账号">
                        <el-input type="hidden" v-model="editUser.adminid"></el-input>
                        <el-input type="text" v-model="editUser.username"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="10" :offset="3">
                    <el-form-item label="修改密码">
                        <el-input type="pwd" v-model="editUser.pwd" placeholder="******"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="10" :offset="3">
                    <el-form-item label="修改角色">
                        <el-select v-model="editUser.roleid" placeholder="请选择">
                            <el-option
                                    v-for="item in roleTypeSelect"
                                    :label="item.rolename"
                                    :value="item.rid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="10" :offset="3">
                    <el-form-item label="修改状态">
                        <el-select v-model="editUser.status" placeholder="请选择">
                            <el-option label="正常" :value=1></el-option>
                            <el-option label="注销" :value=0></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span>
             <el-button @click="updateFlag = false">关闭</el-button>
             <el-button @click="updateRole">提交</el-button>
        </span>
    </el-dialog>
    </template>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            formLabelWidth:"150px",
            updateFlag: false,
            roleList: [],
            update: {
                adminid : ${sessionScope.login.adminid},
                username: '${sessionScope.login.username}',
                roleid: ${sessionScope.login.roleid},
                rolename:'${sessionScope.login.rolename}',
                pwd: "",
                state: ${sessionScope.login.state},
                creationtime:'${sessionScope.login.creationtime}',
                lastlogintime:'${sessionScope.login.lastlogintime}'
            },
            editUser:{},
            roleTypeSelect:{}
        },
        methods: {
            //修改
            editGame() {
                this.updateFlag = true;
            },
            updateRole() {
                let vm = this;
                var data = window.Qs.stringify(this.update);
                axios({
                    url: "${path}/login.do",
                    method: "post",
                    data: "method=updateRoleMessage&" + data
                }).then(response => {
                    if ("修改成功" == response.data) {
                        this.$notify({
                            title: '修改成功',
                            type: 'success'
                        });
                        vm.updateFlag = false;// 关闭对话框
                        vm.editUser=vm.update
                    }else {
                        this.$notify.error({
                            title: '修改失败',
                        });
                    }
                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            initUpdate(){
                this.editUser  = this.update
            },
            roleTypeChange() {
                axios.post("${path}/superSu.do?method=showRole").then(response => {
                    vm.roleTypeSelect = response.data;
                });
            },
        },
        mounted() {
            this.user = '${sessionScope.login}';
            this.initUpdate()
            this.roleTypeChange()
        }
    })
</script>
</body>
</html>
